<template>
    <div class="course-info">
        <h2 class="title">{{ $t('cos_detail_basic_information') }}</h2>
        <div class="base-info">
            <label>
                <div>{{ $t('Training_organization_unit') }}：</div>
                <div>{{detailData.itmTcrName || '--'}}</div>
            </label>
            <label>
                <div>{{ $t('Training_leader') }}：</div>
                <div>{{detailData.itmAdminList ? detailData.itmAdminList.map(item => item.itiName).join(',') : '--'}}</div>
            </label>
            <label>
                <div>{{ $t('Training_personnel_category') }}：</div>
                <div>{{detailData.itmUserType || '--'}}</div>
            </label>
            <!-- <label>
                <div>{{ $t('Industry_type_of_work') }}：</div>
                <div>{{detailData.itmWorkType || '--'}}</div>
            </label> -->
        </div>
        <template v-if="lecturerList.length > 0">
            <h2 class="title">{{ $t('Training_instructor') }}</h2>
            <div class="teacher-box">
                <div class="single-warpper" v-for="(item, index) in lecturerList" :key="index">
                    <van-image round width="55" height="55" :src="appUrl + item.itiImg"/>
                    <div class="teacher-info">
                        <p class="name">
                            {{item.itiName}}
                            <van-icon v-if="!$store.state.config.externalStudent" style="margin-left:10px" name="point-gift-o" color="#7f7f7f" size="20" @click="openReward(item.itiEntId)"/></p>
                        <p>{{level(item.itiLevel)}}</p>
                    </div>
                </div>
            </div>
        </template>
        <h2 class="title">{{ $t("mod_desc") }}</h2><!--简介-->
        <div class="desc" v-if="detailData.itmDesc" v-html="$xss(itmDescHandler(detailData.itmDesc))"></div>
        <div class="desc" v-else>{{detailData.itmDesc || $t('Currently_unavailable')}}</div>
        <!-- 打赏 -->
        <van-popup v-model="show" round position="bottom" style="color:#555">
            <van-grid :border="false">
                <van-grid-item v-for="(item, index) in gitList" :key="index" @click="reward(item)">
                    <van-image width="35" height="35" :src="require(`./images/${item.icon}`)" />
                    <div class="font-size12" style="margin: 10px 0">{{ item.name }}</div>
                    <div class="font-size12">({{item.num}} {{ $t('Learning_Coins') }})</div>
                </van-grid-item>
            </van-grid>
            <div class="total-nums" style="z-index:2009">{{ $t('academic_currency_balance')}}:{{coins}}{{ $t('Learning_Coins') }}</div>
        </van-popup>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: 'course-info',
    props: ['data'],
    components: {
        vanToast: Toast
    },
    data() {
        return {
            detailData: this.data,
            lecturerList: [],
            gitList: [
                { icon: 'bixin.png', name: this.$t('hand_heart_gesture'), num: 5 },
                { icon: 'hua.png', name: this.$t('fresh_flower'), num: 10 },
                { icon: 'pijiu.png', name: this.$t('beer'), num: 20 },
                { icon: 'feiji.png', name: this.$t('Private_jet'), num: 50 }
            ],
            show: false,
            coins: 0,
            currentTeacherId: null
        };
    },
    methods: {
        init() {
            // 由于activated钩子是在mounted之前执行，所以子组件的activated钩子有可能会在父组件的mounted钩子之前执行。这在使用<keep-alive>时是一个需要注意的特性。
            this.detailData = this.$store.getters.getDetail;
            // 获取讲师
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/getLecturer`,
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                this.lecturerList = res.data;
            });
        },
        /**
         * 打开打赏弹框 */
        openReward(teacherId) {
            this.$axios({
                method: 'GET',
                url: `/app/credit/user`
            }).then((res) => {
                this.coins = res.data;
            });
            this.currentTeacherId = teacherId;
            this.show = true;
            this.$emit('iosShowBottom', this.show);
        },
        /**
     * 打赏讲师 */
        reward(item) {
            this.$axios({
                method: 'POST',
                url: `/app/api/points/bill/save`,
                data: {
                    code: 'LECTURER',
                    integral: item.num,
                    dataId: this.currentTeacherId
                }
            }).then((res) => {
                this.show = false;
                this.$emit('iosShowBottom', this.show);
                Toast.success(this.$t('circle294'));
            }).catch((err) => {
                this.show = false;
                this.$emit('iosShowBottom', this.show);
                Toast.fail(err.response.data.errMsg);
            });
        },
        level(val) {
            switch (val) {
            case 'J':
                return this.$t('instructor_level_J');
            case 'M':
                return this.$t('instructor_level_M');
            case 'S':
                return this.$t('instructor_level_S');
            case 'D':
                return this.$t('instructor_level_D');
            case 'F':
                return this.$t('instructor_type_duty');
            case 'P':
                return this.$t('instructor_type_part_time');
            default:
                return this.$t('null');
            }
        }
    },
    filters: {
    },
    computed: {
        itmDescHandler() {
            return (itmDesc) => {
                if (!itmDesc) {
                    return '';
                }
                let desc = itmDesc;
                desc = desc.replace(/<img/g, "<img style='width: 100%;height: auto;'");
                desc = desc.replace(/<video/g, "<video style='width: 100%;height: auto;'");
                desc = desc.replace(/\n/g, '</br>');
                return desc;
            };
        }
    },
    watch: {
        show(val) {
            this.$emit('iosShowBottom', val);
        }
    },
    mounted() {
        // this.init();
    },
    activated() {
        this.init();
    }
};
</script>

<style scoped lang="less">
.course-info{
    background: #fff;
    margin-top: 10px;
    padding: 15px 10px;
    .base-info{
        padding-left: 15px;
        > label{
            display: flex;
            word-break: break-all;
            margin-bottom: 15px;
            align-items: center;
            >div:first-child{
                flex-shrink: 0;
            }
        }
    }
    .teacher-box{
        padding-left: 15px;
        .single-warpper{
            display: flex;
            margin-bottom: 15px;
            .teacher-info{
                flex: 1;
                margin-left: 10px;
                border-bottom: 1px solid #eee;
                .name{
                    font-size: 16px;
                    font-weight: 550;
                }
                p+p{
                    color:#7f7f7f;
                    margin: 10px 0 15px;
                }
            }
            &:last-child{
                margin-bottom: 0;
                .teacher-info{
                    border-bottom: none;
                }
            }
        }
    }
    .desc{
        padding-left: 15px;
        word-break: break-all;
        img {
            width: 100%;
        }
    }
}
.title{
    color:#333;
    font-weight: normal;
    margin: 20px 0 15px;
    display: flex;
    align-items: center;
    &:first-child{
        margin-top: 0;
    }
    &::before{
        content: '';
        display: inline-block;
        width: 5px;
        height: 16px;
        background-color: #075ebb;
        margin-right: 10px;
    }
}
.total-nums{
  border-top: 1px solid #eee;
  text-align: center;
  font-size: 12px;
  padding: 15px 10px;
}
</style>
